<template>
  <div class="battery-voltage-report">
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="right" class="conditions-form">
      <el-form-item label="电站" prop="stationId">
        <el-select v-model="ruleForm.stationId" placeholder="请选择电站" clearable>
          <el-option v-for="station in stationOptions" :key="station.value" :label="station.label"
            :value="station.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电池堆" prop="batteryPileId">
        <el-select v-model="ruleForm.batteryPileId" placeholder="请选择电池堆" clearable>
          <el-option v-for="pile in batteryPileOptions" :key="pile.value" :label="pile.label"
            :value="pile.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单体" prop="cellId">
        <el-input v-model="ruleForm.cellId" placeholder="请输入单体编号"></el-input>
      </el-form-item>
      <el-form-item label="日期" prop="month">
        <el-date-picker v-model="ruleForm.month" type="month" placeholder="请选择月份" format="YYYY-MM"
          value-format="YYYY-MM" />
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        <el-button @click="submitForm(ruleFormRef)">
          查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="exportReport">
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <div class="cont">
      <el-table :data="batteryData" stripe border>
        <el-table-column prop="time" label="时间" align="center"></el-table-column>
        <el-table-column prop="maxVoltage" label="最高电压 (mV)" align="center"></el-table-column>
        <el-table-column prop="cellId" label="单体 ID" align="center"></el-table-column>
        <el-table-column prop="minVoltage" label="最低电压 (mV)" align="center"></el-table-column>
        <el-table-column prop="cellId2" label="单体 ID" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

// 定义表单数据
const ruleFormRef = ref();
const ruleForm = ref({
  stationId: '',
  batteryPileId: '',
  cellId: '',
  month: ''
});
//时间、最高电压（mV）、单体 ID、最低电压（mV）、单体 ID
const batteryData = ref([
  { time: '2023-10-01', maxVoltage: 4000, cellId: 'cell1', minVoltage: 3800, cellId2: 'cell2' },
  { time: '2023-10-02', maxVoltage: 4050, cellId: 'cell3', minVoltage: 3750, cellId2: 'cell4' },
  { time: '2023-10-03', maxVoltage: 4100, cellId: 'cell5', minVoltage: 3700, cellId2: 'cell6' }
]);
// 模拟下拉选项数据
const stationOptions = ref([
  { value: 'station1', label: '电站一' },
  { value: 'station2', label: '电站二' },
  { value: 'station3', label: '电站三' }
]);

const batteryPileOptions = ref([
  { value: 'pile1', label: '电池堆一' },
  { value: 'pile2', label: '电池堆二' },
  { value: 'pile3', label: '电池堆三' }
]);

// 表单提交和重置函数
const submitForm = (formEl: any) => {
  if (!formEl) return;
  formEl.validate((valid: boolean) => {
    if (valid) {
      console.log('查询条件', ruleForm.value);
      // 这里添加查询逻辑
    }
  });
};

const resetForm = (formEl: any) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 导出报告
const exportReport = () => {
  console.log('导出报告', ruleForm.value);
  // 这里添加导出逻辑
};

</script>

<style lang="scss" scoped>
.battery-voltage-report {

  .cont {
    padding: 0.12rem 0.16rem;
    background: #fff;
    margin-top: 0.12rem;

    :deep(.el-table th) {
      background: #F2F3F5;
      color: #000;
      font-weight: bold;
    }
  }
}
</style>
